<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-07 09:36:16
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-12-27 21:39:08
 * @Description: 功能权限
 -->
<template>
  <multipane class="custom-resizer" layout="vertical" style="min-width: 674px">
    <div class="pane1">
      <div class="content">
        <fks-select v-if="multiPortal" v-model="radio" placeholder="请选择">
          <fks-option
            v-for="type in portalTypes"
            :key="type.code"
            :value="type.code"
            :label="type[$lang]"
          />
        </fks-select>
        <fks-input v-model="searchValue" size clearable maxlength="50">
          <fks-button slot="append" icon="fks-icon-search" />
        </fks-input>
        <fks-tree
          :key="treeList[0] && treeList[0].id"
          ref="menuTree"
          class="menu-tree"
          highlight-current
          node-key="id"
          :current-node-key="treeList[0] && treeList[0].id"
          :expand-on-click-node="false"
          :data="treeList"
          :props="{
            children: 'children',
            label: 'title'
          }"
          :filter-node-method="filterNode"
          show-icon
          @node-click="handleClick"
        >
          <span slot-scope="{ data }" class="fks-tree-node__label">
            {{ LANG[data.content.title] || data.content.title }}
          </span>
        </fks-tree>
      </div>
    </div>
    <multipane-resizer />
    <div class="pane" :style="{ flexGrow: 1 }">
      <fun-list :menu-id="menuId" :table-name="rightTitle" />
    </div>
  </multipane>
</template>
<script>
import FunList from './FunList'
import * as Auth from './api'
import Mix from '@/mixins/module'
import { Multipane, MultipaneResizer } from 'vue-multipane'
export default {
  name: 'Function',
  components: {
    FunList,
    Multipane,
    MultipaneResizer
  },
  mixins: [Mix],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      menuId: '',
      treeList: [],
      radio: '',
      searchValue: '',
      rightTitle: ''
    }
  },
  computed: {
    portalTypes() {
      return this.$store.state.enum.portalType || []
    },
    portal() {
      return this.$store.state.portal
    },
    multiPortal() {
      return this.$store.getters.multiPortal
    }
  },
  watch: {
    portal: {
      immediate: true,
      handler: function () {
        if (this.$store.getters.multiPortal) {
          this.radio = /^\d+$/.test(this.$storage.get('auth_portal'))
            ? this.$storage.get('auth_portal')
            : this.portal.type + ''
            ? this.portal.type + ''
            : ''
        }
      }
    },
    radio: {
      immediate: true,
      handler: function () {
        this.$storage.set('auth_portal', this.radio)
        this.getMenuTree()
      }
    },
    searchValue(val) {
      this.$refs.menuTree.filter(val)
    }
  },
  beforeDestroy() {},
  methods: {
    /**
     * @description: 刷新菜单树
     * @param {type}
     * @return:
     */
    @permission('fun:menu')
    getMenuTree() {
      this.loading = true
      return new Promise((resolve) => {
        let params = {
          type: this.$storage.get('auth_portal') || this.radio
        }
        Auth.getMenusTree(params)
          .then((res) => {
            if (res.status) {
              this.treeList = [...res.data]
              this.menuId = this.treeList[0].id
              this.rightTitle = this.treeList[0].content.title
            } else {
              this.treeList = []
            }
            this.loading = false
            resolve(true)
          })
          .catch(() => {
            this.treeList = []
            this.loading = false
            resolve(true)
          })
      })
    },
    handleClick(node) {
      this.menuId = node.id
      this.rightTitle = node.content.title
    },
    filterNode(value, data) {
      if (!value) return true
      if (this.LANG[data.content.title]) {
        return (
          data.content.title.indexOf(value) !== -1 ||
          this.LANG[data.content.title].indexOf(value) !== -1
        )
      } else {
        //满足未配置多语言的情况
        return data.content.title.indexOf(value) !== -1
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.content {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 32px;
  overflow: auto;

  .menu-tree {
    margin-top: 16px;
  }

  .fks-select {
    margin-bottom: 16px;
  }

  .fks-tree {
    overflow: auto;
  }
}

.custom-resizer {
  width: 100%;
  height: 100%;
}

.custom-resizer > .pane {
  overflow: hidden;
  text-align: left;
  background: #fff;
}

.pane1 {
  width: 284px;
  overflow: hidden;
  text-align: left;
  background: #fff;
}

.custom-resizer > .multipane-resizer {
  position: relative;
  left: 0;
  width: 16px;
  margin: 0;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 3px;
    height: 40px;
    margin-top: -20px;
    margin-left: -1.5px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }

  &:hover {
    &::before {
      border-color: #999;
    }
  }
}
</style>